@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  font-family: theme('fontFamily.body');
  --app-background: #f6f7ff;
  --surface-primary: rgba(255, 255, 255, 0.98);
  --surface-elevated: rgba(248, 250, 255, 0.94);
  --surface-muted: rgba(241, 245, 255, 0.9);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-glass-border: rgba(148, 163, 184, 0.2);
  --border-soft: rgba(148, 163, 184, 0.18);
  --border-strong: rgba(15, 23, 42, 0.14);
  --text-primary: #0f172a;
  --text-secondary: #1f2937;
  --text-tertiary: #4b5563;
  --brand-primary: #ff4f8e;
  --brand-secondary: #6b66f5;
  --btn-surface: rgba(255, 255, 255, 0.92);
  --btn-border: rgba(148, 163, 184, 0.35);
  --btn-text: #1f2937;
  --badge-surface: rgba(255, 255, 255, 0.88);
  --badge-border: rgba(148, 163, 184, 0.28);
  --badge-text: #1f2937;
  --tool-banner-surface: rgba(255, 255, 255, 0.94);
  --tool-banner-border: rgba(148, 163, 184, 0.28);
  --shadow-soft: 0 24px 44px -20px rgba(15, 23, 42, 0.25);
  --grid-alpha: 0.04;
  --glow-alpha: 0.55;
  --accent-1: 255,79,142;
  --accent-2: 107,102,245;
  --accent-3: 255,180,120;
  --accent-4: 120,220,255;
}

html, body {
  min-height: 100%;
  height: auto;
  overflow-y: auto;
}

#root {
  min-height: 100vh;
  height: auto;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--app-background);
  color: var(--text-primary);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

/* Mobile UX improvements */
* {
  -webkit-tap-highlight-color: transparent;
}
img, a, button {
  -webkit-touch-callout: none;
}

body::before {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 185, 210, 0.32), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(107, 102, 245, 0.25), transparent 60%),
    radial-gradient(circle at 40% 85%, rgba(255, 140, 180, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 255, 0.95) 55%, rgba(241, 244, 255, 1) 100%);
}

body::after {
  background:
    radial-gradient(ellipse at bottom left, rgba(255, 155, 190, 0.18), transparent 55%),
    radial-gradient(circle at top right, rgba(107, 102, 245, 0.18), transparent 50%);
  mix-blend-mode: color-dodge;
  opacity: 0.75;
  z-index: -1;
}

#root {
  min-height: 100vh;
}

/* Theme variants */
.soft-theme {
  --surface-primary: rgba(255, 255, 255, 0.98);
  --surface-elevated: rgba(248, 250, 255, 0.94);
  --surface-muted: rgba(241, 245, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.76);
  --surface-glass-border: rgba(148, 163, 184, 0.2);
  --border-soft: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(15, 23, 42, 0.16);
  --text-primary: #0f172a;
  --text-secondary: #1f2937;
  --text-tertiary: #475569;
  --btn-surface: rgba(255, 255, 255, 0.95);
  --btn-border: rgba(148, 163, 184, 0.28);
  --btn-text: #1f2937;
  --badge-surface: rgba(255, 255, 255, 0.9);
  --badge-border: rgba(148, 163, 184, 0.26);
  --badge-text: #1f2937;
  --tool-banner-surface: rgba(255, 255, 255, 0.96);
  --tool-banner-border: rgba(148, 163, 184, 0.3);
  --shadow-soft: 0 32px 54px -26px rgba(15, 23, 42, 0.28);
  background: radial-gradient(circle at top right, rgba(241, 245, 255, 0.65), rgba(255, 240, 245, 0.65)), var(--app-background);
  color: var(--text-primary);
}

.vibrant-theme {
  --surface-primary: rgba(16, 24, 44, 0.82);
  --surface-elevated: rgba(18, 28, 49, 0.78);
  --surface-muted: rgba(26, 38, 64, 0.72);
  --surface-glass: rgba(32, 46, 78, 0.6);
  --surface-glass-border: rgba(162, 191, 255, 0.32);
  --border-soft: rgba(125, 148, 212, 0.45);
  --border-strong: rgba(168, 190, 255, 0.35);
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-tertiary: #c7d2fe;
  --btn-surface: rgba(46, 62, 105, 0.72);
  --btn-border: rgba(165, 190, 255, 0.45);
  --btn-text: #f8fafc;
  --badge-surface: rgba(46, 62, 105, 0.65);
  --badge-border: rgba(165, 190, 255, 0.4);
  --badge-text: #f8fafc;
  --tool-banner-surface: rgba(30, 44, 78, 0.72);
  --tool-banner-border: rgba(165, 190, 255, 0.4);
  --shadow-soft: 0 28px 60px -22px rgba(6, 12, 28, 0.7);
  color: var(--text-primary);
  background:
    radial-gradient(520px 320px at 18% 12%, rgba(var(--accent-1), 0.16), transparent 60%),
    radial-gradient(420px 300px at 82% 10%, rgba(var(--accent-2), 0.14), transparent 62%),
    radial-gradient(520px 340px at 40% 92%, rgba(var(--accent-3), 0.12), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #111829 56%, #0d1424 100%);
}

@layer components {
  /* Ambient aurora background using theme accent palette */
  .aurora-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    background:
      radial-gradient(520px 320px at 8% 10%, rgba(var(--accent-1), 0.18), transparent 60%),
      radial-gradient(460px 300px at 92% 12%, rgba(var(--accent-2), 0.16), transparent 62%),
      radial-gradient(520px 340px at 90% 92%, rgba(var(--accent-3), 0.16), transparent 60%),
      radial-gradient(520px 340px at 10% 90%, rgba(var(--accent-4), 0.12), transparent 62%);
    filter: blur(42px) saturate(120%);
    opacity: 0.28;
  }

  .vibrant-theme .aurora-bg {
    opacity: 0.38;
    filter: blur(46px) saturate(125%);
  }

  /* Liquid glass card inspired by modern iOS aesthetics */
  .liquid-card {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    background: var(--surface-glass);
    border: 1px solid var(--surface-glass-border);
    box-shadow: var(--shadow-soft);
  }

  .liquid-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background:
      radial-gradient(560px circle at 0% 0%, rgba(var(--accent-1), 0.18), transparent 40%),
      radial-gradient(420px circle at 100% 0%, rgba(var(--accent-2), 0.14), transparent 42%),
      radial-gradient(520px circle at 100% 100%, rgba(var(--accent-3), 0.14), transparent 40%),
      radial-gradient(500px circle at 0% 100%, rgba(var(--accent-4), 0.10), transparent 45%),
      repeating-linear-gradient(0deg, rgba(15,23,42,var(--grid-alpha)), rgba(15,23,42,var(--grid-alpha)) 1px, transparent 1px, transparent 12px),
      repeating-linear-gradient(90deg, rgba(15,23,42,var(--grid-alpha)), rgba(15,23,42,var(--grid-alpha)) 1px, transparent 1px, transparent 12px);
  }

  .liquid-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
    mask: linear-gradient(#000, transparent);
    -webkit-mask: linear-gradient(#000, transparent);
    pointer-events: none;
  }

  .vibrant-theme .liquid-card {
    background: var(--surface-glass);
    border-color: var(--surface-glass-border);
  }

  .soft-theme .liquid-card::before {
    opacity: 0.85;
    filter: saturate(90%);
  }

  .glass-panel {
    @apply rounded-3xl shadow-soft;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    background: var(--surface-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
  }

  .surface-card {
    @apply rounded-3xl shadow-soft;
    background: var(--surface-primary);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
  }

  .surface-muted {
    @apply rounded-3xl border border-white/20;
    background: var(--surface-muted);
    border-color: var(--border-soft);
    color: var(--text-secondary);
  }

  article.surface-card,
  article.glass-panel,
  .vibrant-theme article {
    background: transparent !important;
  }

.vibrant-theme section,
.vibrant-theme button {
  background: transparent !important;
}


  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-2xl px-4 py-2 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
    background: var(--btn-surface);
    border: 1px solid var(--btn-border);
    color: var(--btn-text);
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(6px);
  }

  .btn-primary {
    @apply btn hover:-translate-y-0.5;
    background: linear-gradient(135deg, rgba(var(--accent-2), 0.42), rgba(var(--accent-1), 0.46));
    border-color: rgba(var(--accent-2), 0.55);
    color: #ffffff;
    box-shadow: 0 14px 30px -16px rgba(var(--accent-2), 0.55);
  }

  .btn-secondary {
    @apply btn;
    background: var(--surface-elevated);
    border-color: var(--border-soft);
    color: var(--text-secondary);
  }

  .btn-ghost {
    @apply btn;
    background: transparent;
    border-color: var(--border-soft);
    color: var(--text-secondary);
    box-shadow: none;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium;
    background: var(--badge-surface);
    border: 1px solid var(--badge-border);
    color: var(--badge-text);
  }

  .badge-soft {
    @apply badge;
    border-color: var(--badge-border);
  }

  .markdown-body {
    @apply space-y-3;
    color: var(--text-secondary);
  }

  .markdown-body p,
  .markdown-body ul,
  .markdown-body ol {
    @apply leading-relaxed;
  }

  .markdown-body ul {
    @apply list-disc pl-5;
  }

  .markdown-body ol {
    @apply list-decimal pl-5;
  }

  .tool-banner {
    @apply flex items-center gap-2 rounded-2xl border px-4 py-2 text-xs shadow-inner;
    background: var(--tool-banner-surface);
    border-color: var(--tool-banner-border);
    color: var(--text-secondary);
  }

  .tool-banner--running {
    @apply text-blush-600;
    background: color-mix(in srgb, rgba(var(--accent-1), 0.32) 35%, var(--tool-banner-surface));
    border-color: color-mix(in srgb, rgba(var(--accent-1), 0.4) 45%, var(--tool-banner-border));
  }

  .tool-banner--done {
    @apply text-emerald-600;
    background: color-mix(in srgb, rgba(16, 185, 129, 0.3) 32%, var(--tool-banner-surface));
    border-color: color-mix(in srgb, rgba(16, 185, 129, 0.35) 40%, var(--tool-banner-border));
  }

  .tool-banner-icon {
    @apply h-4 w-4;
  }

  .solid-panel {
    @apply rounded-3xl;
    position: relative;
    background: linear-gradient(145deg, color-mix(in srgb, rgba(var(--accent-4), 0.45) 18%, var(--surface-primary)), color-mix(in srgb, rgba(var(--accent-1), 0.4) 24%, var(--surface-primary)));
    border: 1px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
    box-shadow: var(--shadow-soft);
  }

  .solid-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(80% 80% at 20% 20%, rgba(var(--accent-1), 0.22), transparent 65%),
      radial-gradient(80% 80% at 80% 0%, rgba(var(--accent-4), 0.16), transparent 70%);
    opacity: 0.65;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .solid-panel > * {
    position: relative;
    z-index: 1;
  }

  .input-shell {
    @apply rounded-2xl;
    background: color-mix(in srgb, var(--surface-elevated) 80%, rgba(var(--accent-4), 0.1) 20%);
    border: none;
    box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .vibrant-theme .input-shell {
    background: color-mix(in srgb, rgba(22, 32, 56, 0.82) 75%, rgba(var(--accent-2), 0.24) 25%);
    box-shadow: 0 26px 60px -28px rgba(4, 10, 24, 0.9);
  }

  .markdown-body strong {
    @apply font-semibold text-slate-800;
  }

  .markdown-body em {
    @apply italic text-slate-700;
  }


::selection {
  background: rgba(255, 79, 142, 0.2);
}

.body-gradient::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 200, 221, 0.25), transparent 60%),
    radial-gradient(circle at 80% 10%, rgba(107, 102, 245, 0.18), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(255, 125, 160, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 255, 0.95) 60%, rgba(241, 244, 255, 1) 100%);
  z-index: -2;
}

.body-gradient::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at bottom left, rgba(255, 155, 190, 0.18), transparent 60%),
    radial-gradient(circle at top right, rgba(107, 102, 245, 0.15), transparent 55%);
  mix-blend-mode: hard-light;
  opacity: var(--glow-alpha);
  z-index: -1;
}

.card-glow {
  position: relative;
}

.card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at top left, rgba(255, 165, 195, 0.35), transparent 55%),
    radial-gradient(circle at bottom right, rgba(107, 102, 245, 0.3), transparent 45%);
  opacity: 0.7;
}

.card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: transparent; /* 去除泛白覆盖，避免文字发灰 */
}

.ribbon-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 79, 142, 0.15), rgba(107, 102, 245, 0.15));
  color: var(--brand-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.ribbon-eyebrow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 79, 142, 0.3);
  mask: linear-gradient(#000, #000);
  pointer-events: none;
}

}
/* Readability tweaks for dark vibrant theme */
.vibrant-theme :is(.surface-card, .glass-panel, .surface-muted, .liquid-card) {
  color: var(--text-primary);
}

.vibrant-theme a {
  color: color-mix(in srgb, rgba(var(--accent-4), 1) 68%, #f8fafc 32%);
}

.vibrant-theme :is(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800) {
  color: var(--text-primary) !important;
}

.vibrant-theme :is(.text-slate-600, .text-slate-500, .text-slate-400, .text-gray-700, .text-gray-600) {
  color: var(--text-secondary) !important;
}

.vibrant-theme :is(.text-slate-300, .text-slate-200, .text-gray-500, .text-gray-400) {
  color: var(--text-tertiary) !important;
}

.vibrant-theme input,
.vibrant-theme textarea,
.vibrant-theme select {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
}

.vibrant-theme input::placeholder,
.vibrant-theme textarea::placeholder {
  color: color-mix(in srgb, var(--text-tertiary) 74%, transparent);
}

.vibrant-theme :is(.badge, .badge-soft, .chip) {
  background: var(--badge-surface) !important;
  border-color: var(--badge-border) !important;
  color: var(--badge-text) !important;
}

.vibrant-theme .markdown-body {
  color: var(--text-secondary);
}

.vibrant-theme :is(.markdown-body h1, .markdown-body h2, .markdown-body h3) {
  color: var(--text-primary);
}

.vibrant-theme .markdown-body li {
  color: var(--text-secondary);
}

.vibrant-theme :is([class*='bg-white/'], [class*='bg-slate-'][class*='/'], [class*='bg-gray-'][class*='/']) {
  background-color: transparent !important;
}

/* Subtle entrance animation */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
.surface-card, .glass-panel { animation: fade-in-up .35s ease both; }
